<template>
  <div class="dialogProduct">
    <el-dialog :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false" :close-on-press-escape='false'
               :before-close="handleClose"
               title="插入产品" center>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid_item">
            <span class="label_item"><b>*</b>产品模板：</span>
            <el-select v-model="formRule.templateDemo" placeholder="选择模板" size="small" @change="handleChangePro">
              <el-option v-for="item,index in templateList" :key="index"
                         :label="item.templateName" :value="item.id"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid_item">
            <span class="label_item">产品名称：</span>
            <el-input v-model="form.productName" size="small" placeholder="请输入产品名称"></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid_item">
            <span class="label_item">产品型号：</span>
            <el-input v-model="form.productModel" size="small" placeholder="请输入产品型号"></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid_item">
            <span class="label_item">产品类型：</span>
            <el-select v-model="form.productType" size="small">
              <el-option v-for="item,index in treeProductUnit" :key="index"
                         :label="item.dictValue" :value="item.dictKey"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid_item">
            <span class="label_item">产品分组：</span>
            <el-cascader placeholder="请选择产品分组" size="small"
                         :options="list" :props="defaultProps1"
                         v-model="typeArr" change-on-select
                         @change="handleChange">
            </el-cascader>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid_item">
            <el-button size="small" @click="reset" type="default">重 置</el-button>
            <el-button size="small" type="primary" @click="search" :loading="loading">{{loading?'搜索中':'搜 索'}}
            </el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid_item">
            <p class="grid_title">筛选结果：</p>
            <div class="grid_content">
              <div class="group">
                <el-checkbox-group v-model="multipleSelection">
                  <div class="product_item" v-for="(item,index) in table" :key="index">
                    <el-checkbox :label="item">{{item.name}}
                    </el-checkbox>
                    <div class="item-right">
                      <img :src="item.defaultPicUrl" class="product_img"/>
                      <div class="right-detail">
                        <p class="item_title moreTwo">{{item.productEname}}</p>
                        <p class="item_message more">{{item.productSpec.costCurrencyUnitName}}
                          {{item.productSpec.unitPrice}}</p>
                      </div>
                    </div>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid_item">
            <p class="grid_title">已选择：</p>
            <div class="grid_content">
              <div>
                <div class="product_item" v-for="(item,index) in multipleSelection" :key="index">
                  <div class="item-right">
                    <img :src="item.defaultPicUrl" class="product_img"/>
                    <div class="right-detail">
                      <p class="item_title moreTwo">{{item.productEname}}</p>
                      <p class="item_message more">{{item.productSpec.costCurrencyUnitName}}
                        {{item.productSpec.unitPrice}}</p>
                      <span class="icon-delete_icon remove_btn" @click="multipleSelection.splice(index,1)"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 底部按钮-->
      <div slot="footer" class="dialog-footer" align="right">
        <el-button @click="handleClose" size="mini">取 消</el-button>
        <el-button type="primary" size="mini" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {searchProduct, productTree} from '@/api/mail/make'
    import {productList} from "@/api/automation/product"
    import {mapState, mapGetters} from 'vuex'
    import {filterProduct, getDictory} from '@/util/util'

    export default {
        name: "DialogProduct",
        data() {
            return {
                dialogVisible: false,
                form: {
                    productCode: '',//产品编号
                    productName: '',//产品名称
                    productModel: '',//产品型号
                    productType: '',//产品类型
                    typeId: ''//产品分组
                },
                templateList: [],//产品模板数组
                formRule: {
                    template: '',//产品模板
                    templateDemo: ''
                },
                defaultProps: {
                    children: 'children',
                    label: 'dictKey',
                    value: 'id'
                },
                defaultProps1: {
                    children: 'children',
                    label: 'text',
                    value: 'id'
                },
                typeArr: [],
                list: [],
                treeProductUnit: [],
                table: [],
                multipleSelection: [],
                loading: false
            }
        },
        computed: {
            ...mapState(['common', 'user']),
            ...mapGetters(['userInfo'])
        },
        mounted() {
            this.treeProductUnit = getDictory('product_type').children;
            console.log( this.treeProductUnit)
        },
        methods: {
            submit() {
                if (!this.formRule.templateDemo) {
                    this.$message({
                        message: '请先选择产品模板',
                        type: 'success'
                    });
                    return;
                }
                let waitContent = '';
                for (let item of this.multipleSelection) {
                    waitContent += filterProduct(this.formRule.template, item);
                }
                this.handleClose();
                this.$emit('getProduct', waitContent)
            },
            //初始化
            init() {
                //清空初始化
                this.reset();
                //获取产品模板
                this.getTemplate();
            },
            handleChangePro(val) {
                if (this.templateList.length != 0) {
                    this.templateList.map(item => {
                        if (item.id == val) {
                            this.formRule.template = item.htmlContent;
                        }
                    })
                }
            },
            search() {
                //处理产品类型
                this.loading = true;
                this.form.typeId = this.typeArr[this.typeArr.length - 1]
                searchProduct(this.form).then(res => {
                    this.loading = false;
                    const result = res.data.data;
                    if (result.length > 0) {
                        this.table = result;
                    } else {
                        this.$message({
                            message: '未查询到产品信息，请先添加产品',
                            type: 'success'
                        });
                    }
                }).catch(err => {
                    this.loading = false;
                })
            },
            handleClose() {
                this.loading = false;
                this.dialogVisible = false;
            },
            getTemplate() {
                productList('', '', 1, 100).then(res => {//待定
                    if (res.data.success) {
                        this.templateList = res.data.data.records;
                    }
                    if (this.templateList.length == 0) {
                        this.$confirm('您还没有创建产品模板，立即去创建', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'success'
                        }).then(() => {
                            this.$store.commit('SET_CURRENTSETFRAG','second')
                            this.$router.push('/product/set')
                        }).catch(() => {
                        });
                    } else {
                        //获取产品分组
                        this.getTree()
                        this.dialogVisible = true;
                    }
                })
            },
            //多选
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleChange(value) {
                this.form.typeId = value[value.length - 1]
            },
            reset() {
                this.typeArr = [];
                this.form = {
                    productCode: '',//产品编号
                    productName: '',//产品名称
                    productModel: '',//产品型号
                    productType: '',//产品类型
                    typeId: ''//产品分组
                }
                this.formRule = {
                    template: '',//产品模板
                    templateDemo: ''
                }
                this.typeArr = [];
                this.table = [];
                this.multipleSelection = [];
            },
            getTree() {
                productTree().then(res => {
                    this.list = res.data.data;
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
 @import "@/styles/choosepro.scss";

</style>
